<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>回告历史</title>
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
    <style>
        .longinput {
            width: 300px;
        }
        .shortinput {
            width: 150px;
        }
        .layui-form-item {
            margin-top: 5px;
            margin-bottom: 0px;
        }
    </style>
</head>
<body>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>客户服务</cite></a>
        <a><cite>代收回告</cite></a>
        <a><cite>回告历史</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" id="searchCard">
                <!--<div class="layui-card-header">代收历史表</div>-->
                <div class="layui-card-body">
                    <div class="layui-form layui-form-pane" lay-filter="historyTable">
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">货运单编号</label>
                            <div class="layui-inline">
                                <input id="billId" class="layui-input longinput" type="text" placeholder="请输入货运单编号"/>
                            </div>
                        </div>
                        <div class=" layui-form-item layui-inline">
                            <label class="layui-form-label">通知号码</label>
                            <div class="layui-inline">
                                <input id="dialNo" class="layui-input shortinput" type="text" placeholder="请输入"/>
                            </div>
                        </div>
                        <div class=" layui-form-item layui-inline">
                            <label class="layui-form-label">通知时间</label>
                            <div class="layui-inline">
                                <input id="finallyDialTime" class="layui-input longinput" type="text" placeholder="请选择时间范围"/>
                            </div>
                        </div>
                        <div class=" layui-form-item layui-inline">
                            <div class="layui-inline">
                                <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索
                                </button>
                                <button id="btnReset" class="layui-btn layui-btn-normal" title="点击重置查询条件"><i
                                        class="layui-icon">&#xe639;</i>重置</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <!--<div class="layui-card-header">代收历史表</div>-->
                <div class="layui-card-body">
                    <table class="layui-hide" id="historyTable" lay-filter="historyTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 头部工具栏 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">

        <!--        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
    </div>
</script>
<!-- 行内工具栏 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除历史</a>
</script>
<script src="../../../layui/layui.js"></script>
<!--<script src="../../../layuiadmin/layui/layui.js"></script>-->
<script>


    // 要使用的layui模块
    layui.use(['layer', 'form', 'table', 'laydate', 'element'], function () {
        var layer = layui.layer; // 获得layer模块
        var form = layui.form; // 获得form模块
        var table = layui.table; // 获得table模块
        var laydate = layui.laydate; // 获得laydate模块
        var element = layui.element; // 获得element模块（和导航、tab等有关）
        var $ = layui.$; // 调用JQuery方法时
        var laytpl = layui.laytpl;

        //更新 lay-filter="test2" 所在容器内的全部 select 状态
        // form.render('select', 'test2');


        //第一个实例
        var tableIns = table.render({
            elem: '#historyTable' // 给table设置id或class，方便layui调用该元素
            , height: 'full-120' // 窗口高度-100
            , url: '/customer/collection-callback/historyList' // 数据接口
            // ,method: 'post' //如果无需自定义HTTP类型，可不加该参数
            , page: true // 开启分页
            , limit: 20 // 默认页大小
            , limits: [10, 20, 30, 50, 100] //自定义可选分页大小
            , cellMinWidth: 80 // 全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , skin: 'line' // 行边框风格
            // ,even: true // 开启隔行背景
            // ,size: 'sm' // 小尺寸的表格
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            , defaultToolbar: [ {
                title: '查询'
                , layEvent: 'search'
                , icon: 'layui-icon-search'
            }
                // 列过滤、导出按钮、打印按钮
                ,'filter', 'exports', 'print',
            ]
            , title: '代收结算表'// 表名
            // 列信息
            , cols: [[ //表头
                {field: 'cbiid', title: 'cbiid', width: 100, hide: true}
                , {field: 'billId', title: '货运单编号', width: 300, align: 'center'}
                , {field: 'dialNo', title: '通知号码', width: 130, align: 'center'}
                , {field: 'type', title: '类别', sort: true, minWidth: 90, align: 'center'}
                , {field: 'content', title: '通知内容', minWidth: 120, align: 'center'}
                , {field: 'writeTime', title: '填写时间', minWidth: 160, align: 'center'}
                , {field: 'writer', title: '填写人', minWidth: 150, align: 'center'}
                , {field: 'finallyDialTime', title: '通知时间', sort: true, minWidth: 150, align: 'center'}
                , {field: 'success', title: '是否成功', minWidth: 110, align: 'center'}
                , {field: 'billType', title: '单据类型', minWidth: 110, align: 'center'}
                , {title: '操作', toolbar: '#barDemo', minWidth: 150, align: 'center', fixed: 'right'}
            ]]
        });

        // laydate时间模块，指定html的元素
        laydate.render({
            elem: '#finallyDialTime' // 指定元素
            ,range: true // 启用范围，或 range: '~' 来自定义分割字符，默认'-'
            ,format: 'yyyy-MM-dd HH:mm:ss'
            ,btns: ['clear', 'now', 'confirm']
            // ,theme: '#393D49'
            ,theme: 'grid'
        });

        // 查询用对象
        var MgrSettle = {
            tableId: 'historyTable',    //表格id
            condition: {
                billId: '',
                dialNo: '',
                finallyDialTime: '',
            }
        };

        // 查询请求内容
        MgrSettle.search = function () {
            var queryData = {};
            queryData['billId'] = $("#billId").val();
            queryData['dialNo'] = $("#dialNo").val();
            queryData['finallyDialTime'] = $('#finallyDialTime').val();
            table.reload(MgrSettle.tableId, {where: queryData});
        };
        // 点击查询按钮
        $('#btnSearch').click(function () {
            MgrSettle.search();
        });
        // 重置查询条件
        $('#btnReset').click(function () {
            $('#billId').val('');
            $('#dialNo').val('');
            $('#finallyDialTime').val('');
            form.render(null, 'historyTable');
        });


        // 服务器排序
        table.on('sort(historyTable)', function (obj) { //注：sort 是工具条事件名，historyTable 是 table 原始容器的属性 lay-filter="对应的值"
            // console.log(obj.field); //当前排序的字段名
            // console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            // console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('historyTable', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    sidx: obj.field //排序字段
                    , sord: obj.type //排序方式
                }
            });
            // layer.msg('服务端排序。order by ' + obj.field + ' ' + obj.type);
        });


        //头工具栏事件
        table.on('toolbar(historyTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'search':
                    $(function () {
                        $("#searchCard").toggle(400,function(){
                            $('body').find('#btnShowSearch').val();
                        });
                    });
                    break;
            }
            ;
        });

        //监听工具条
        table.on('tool(historyTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                var data = obj.data;

                layer.confirm('确认删除？', function (index) {
                    // obj.del();
                    $.post('/customer/collection-callback/removeHistory/' + data.cbiid, function (data) {
                        tableIns.reload();
                        layer.msg(data.msg);
                        layer.close(index);
                    });
                });
            }
        });
        // 监听行单击事件
        /*table.on('row(historyTable)', function(obj){
            console.log(obj.tr) //得到当前行元素对象
            console.log(obj.data) //得到当前行数据
            //obj.del(); //删除当前行
            //obj.update(fields) //修改当前行数据
        });*/

        // 监听行双击事件
        /*        table.on('rowDouble(historyTable)', function (obj) {
                    console.log(obj.tr)//得到当前行元素对象
                    console.log(obj.data) //得到当前行数据
                });*/


        // 复选框监听
        /*        table.on('checkbox(historyTable)', function (obj) {
                    console.log(obj.checked); //当前是否选中状态
                    console.log(obj.data); //选中行的相关数据
                    console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
                });*/

        // 时间格式化方法
        function dateFormat(fmt, date) {
            let ret;
            let opt = {
                "y+": date.getFullYear().toString(),        // 年
                "M+": (date.getMonth() + 1).toString(),     // 月
                "d+": date.getDate().toString(),            // 日
                "H+": date.getHours().toString(),           // 时
                "m+": date.getMinutes().toString(),         // 分
                "s+": date.getSeconds().toString()          // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                };
            };
            return fmt;
        }

        // 子表展示方法
        function collapseTable(options) {
            var trObj = options.elem;
            if (!trObj) return;
            var accordion = options.accordion,
                success = options.success,
                content = options.content || '';
            var tableView = trObj.parents('.layui-table-view'); //当前表格视图
            var id = tableView.attr('lay-id'); //当前表格标识
            var index = trObj.data('index'); //当前行索引
            var leftTr = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + index + '"]'); //左侧当前固定行
            var rightTr = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + index + '"]'); //右侧当前固定行
            var colspan = trObj.find('td').length; //获取合并长度
            var trObjChildren = trObj.next(); //展开行Dom
            var indexChildren = id + '-' + index + '-children'; //展开行索引
            var leftTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + indexChildren + '"]'); //左侧展开固定行
            var rightTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + indexChildren + '"]'); //右侧展开固定行
            var lw = leftTr.width() + 15; //左宽
            var rw = rightTr.width() + 15; //右宽
            //不存在就创建展开行
            if (trObjChildren.data('index') != indexChildren) {
                //装载HTML元素
                var tr = '<tr data-index="' + indexChildren + '"><td colspan="' + colspan + '"><div style="height: auto;padding-left:' + lw + 'px;padding-right:' + rw + 'px" class="layui-table-cell">' + content + '</div></td></tr>';
                trObjChildren = trObj.after(tr).next().hide(); //隐藏展开行
                var fixTr = '<tr data-index="' + indexChildren + '"></tr>';//固定行
                leftTrChildren = leftTr.after(fixTr).next().hide(); //左固定
                rightTrChildren = rightTr.after(fixTr).next().hide(); //右固定
            }
            //展开|折叠箭头图标
            trObj.find('td[lay-event="collapse"] i.layui-colla-icon').toggleClass("layui-icon-right layui-icon-down");
            //显示|隐藏展开行
            trObjChildren.toggle();
            //开启手风琴折叠和折叠箭头
            if (accordion) {
                trObj.siblings().find('td[lay-event="collapse"] i.layui-colla-icon').removeClass("layui-icon-down").addClass("layui-icon-right");
                trObjChildren.siblings('[data-index$="-children"]').hide(); //展开
                rightTrChildren.siblings('[data-index$="-children"]').hide(); //左固定
                leftTrChildren.siblings('[data-index$="-children"]').hide(); //右固定
            }
            success(trObjChildren, indexChildren); //回调函数
            heightChildren = trObjChildren.height(); //展开高度固定
            rightTrChildren.height(heightChildren + 38).toggle(); //左固定
            leftTrChildren.height(heightChildren + 38).toggle(); //右固定
        }

    });

</script>
</body>
</html>